<template>
  <div class="login-container" v-loading='autoLoading' element-loading-text="自动登录中...">
    <div class="login-container-middle">
      <div class="login-container-text">
        <img v-if="logo" :src="logo" alt="">
        <p>{{titleA.split('/')[0]}}{{titleA.includes('/')?titleA.split('/')[1]:''}}</p>
      </div>
      <div class="login-container-form">
        <div class="login-container-form-left"
        :style="{
          background:`url(${bgUrl});`,
          'background-size':'100% 100%'
        }"
        >
          <p>{{ titleA.split('/')[0] }}</p>
          <p v-if="titleA.includes('/')">{{ titleA.split('/')[1] }}</p>
          <span style="color:#fff;font-size:14px;margin-top:15px;display:inline-block;">欢迎登录</span>
        </div>
        <div class="login-container-form-right">
          <el-form
            v-show="isLogin"
            ref="loginRef"
            :model="loginModel"
            :rules="loginRules"
            label-position="left"
          >
            <div class="title-container">
              <h3 class="title">登录</h3>
            </div>
            <el-form-item prop="username">
              <el-input
                v-model="loginModel.username"
                type="text"
                placeholder="请输入账号"
                autocomplete="on"
                clearable
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginModel.password"
                type="password"
                placeholder="请输入密码"
                autocomplete="on"
                clearable
                show-password
              />
            </el-form-item>
            <el-form-item v-if="verifyShow" prop="verify_code">
              <el-col :span="13">
                <el-input
                  ref="verify_code_ipt"
                  v-model="loginModel.verify_code"
                  type="text"
                  placeholder="请输入验证码"
                  autocomplete="off"
                  style="height: 50px; line-height: 50px"
                  clearable
                />
              </el-col>
              <el-col :span="11">
                <el-image
                  :src="verifySrc"
                  fit="fill"
                  alt="验证码"
                  title="点击刷新验证码"
                  style="width: 200px; height: 50px; float: right"
                  @click="verifyRefresh"
                />
              </el-col>
            </el-form-item>
            <el-form-item class="style_change_item">
              <el-checkbox
                label="记住我"
                :value="loginModel.rememberMe"
                @change="changeCheckBox"
              />
            </el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              style="
                width:100%;
                border-radius: 6px;
                height: 60px;
                margin: 0 auto;
                margin-bottom: 24px;
                margin-top:26px !important;
                background-color:#1677FF;
                font-size:16px !important;
              "
              @click.native.prevent="handleLogin"
              >登录</el-button
            >
            <div class="chukebox">
              <p v-if='startWx.indexOf("ansheng")==-1'
                @click="
                  () => {
                    this.isLogin = !this.isLogin;
                  }
                "
              >
                微信登录
              </p>
              <el-divider direction="vertical"></el-divider>
              <p v-if="isshowlogJ" @click="baomingHref">
                立即报名
              </p>
              <el-divider v-if="isshowlogJ" direction="vertical"></el-divider>
              <p @click="Adminhref">
                管理员登录
              </p>
            </div>
            <!-- <p v-if="isshowlogJ" style="display: inline">
              还没有账号?<a :href="href" class="baomingA">立即报名</a>
            </p>
            <p>我是管理员:<a :href="hrefAdmin" class="baomingA">点此登录</a></p>
            <div class="weixin" v-if='startWx.indexOf("ansheng")==-1'>
              <span>其他登录方式</span
              ><img
                @click="
                  () => {
                    this.isLogin = !this.isLogin;
                  }
                "
                src="@/assets/logo/weixin.png"
                alt=""
                title="微信登录"
              />
            </div> -->
          </el-form>
          <div v-show="!isLogin" class="iframe">
            <div class="title-container">
              <h3 class="title">微信登录</h3>
            </div>
            <!-- <div id='WeChatLogin' v-if="ishasserve">
              <iframe ref='iframe' width="auto" height="auto">
              </iframe>
            </div> -->
            <p style="color:#666666;font-size:16px;margin:0;margin-bottom:10px;">请使用微信扫一扫登录</p>
            <img
              :src="
                'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + ticket
              "
              alt=""
            />
            <div style="width: 100%;margin-top:64px;">
                <div class="chukebox">
                  <p v-if='isYesBack'
                    @click="
                      () => {
                        this.isLogin = !this.isLogin;
                      }
                    "
                  >
                    账号登录
                  </p>
                  <el-divider v-if='isYesBack' direction="vertical"></el-divider>
                  <p v-if="isshowlogJ" @click="baomingHref">
                    立即报名
                  </p>
                  <el-divider v-if="isshowlogJ" direction="vertical"></el-divider>
                  <p @click="Adminhref">
                    管理员登录
                  </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cope" v-if="href.indexOf('sddl')==-1&&!href.includes('6868618')">
        本平台由<a href="https://www.taijieyun.com" class="lefos">泰捷云学</a
        >提供技术支持
      </div>
    </div>
  </div>
</template>
<script>
import {
  getUserid,
  getUserpassword,
  getAdminToken,
  setAdminUserId,
  setAdminToken,
  setsubject_id,
  setsubjectTitle,
} from "@/utils/auth";
import { getqrcode, scanresult } from "@/api/admin";
import { mapGetters } from "vuex";
import bg from '@/assets/logo/form-bg-left.png'
import wfqa from '@/assets/logo/form-bg-left-wfqa.png'
export default {
  name: "Login",
  components: {},
  computed: {
    ...mapGetters(["initObj"]),
  },
  data() {
    return {
      loading: false,
      redirect: undefined,
      otherQuery: {},
      verifyShow: false,
      verifySrc: "",
      loginModel: {
        username: "",
        password: "",
        verify_id: "",
        verify_code: "",
        rememberMe: false,
      },
      loginRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        verify_code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      obj: {}, //微信
      isLogin: true,
      isYesBack:false,
      innerHTMLA: {},
      href:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API + this.$platformList
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ) + this.$platformList,
      hrefAdmin:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API + "/admin"
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ) + "/admin",
      startWx:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),
      titleA: "",
      ticket: "", //生成二维码
      timeOut: Object,
      timeOutQ: Object,
      ishasserve: true, //使用泰捷云服务号为 true (默认微信登录)  false为自行更改登录服务号
      isshowlogJ: false, //是否展示报名链接
      logo:'',
      bgUrl:'',
      autoLoading:false,
    };
  },
  async created() {
    if(this.$route.query.username){
      this.loginModel.username=this.$route.query.username
      this.loginModel.password=this.$route.query.username.substring(this.$route.query.username.length-4)
      this.autoLoading=true
      await this.handleLogin()
    }
    await this.$store.dispatch("user/initfunction"); //存入企业名称及id
    this.titleA = this.initObj.alias;
    this.logo = this.initObj.logo;
    console.log(this.initObj.force_bind_wechat,'2222');
    // 强制微信登录
    if(this.initObj.force_bind_wechat=='是'){
      this.isLogin=false
      this.isYesBack=false
    }else{
      this.isLogin=true
      this.isYesBack=true
    }
    this.isshowlogJ = JSON.parse(this.initObj.setting).studentHoke
      ? JSON.parse(this.initObj.setting).studentHoke == "开启"
      : false;
    // this.titleA=navigator.userAgent
    // this.$store.dispatch('')
    // if(this.corporateName.alias){
    //   this.name_title = this.corporateName.alias
    // }
    if(!this.qyType('qianan')){
      this.bgUrl=wfqa
    }else{
      this.bgUrl = bg
    }
    //记住密码 回显
    if (getUserid()) {
      this.loginModel.rememberMe = true;
      this.loginModel.username = getUserid();
      this.loginModel.password = getUserpassword();
    } else {
      this.loginModel.rememberMe = false;
      this.loginModel.username = "";
      this.loginModel.password = "";
    }
    // console.log(getUserid())
    // document.onkeyup = function(e) {
    //   var key = window.event.keyCode;
    //   if (key == 13&&!_this.loading) {
    //     _this.handleLogin();
    //   }
    // }
    document.addEventListener('keydown',this.watchEnter)
    if (this.initObj.wechat_service == "泰捷云服务号") {
      this.ishasserve = true;
    } else {
      this.ishasserve = false;
    }
  },
  watch: {
    isLogin(val) {
      if (!val) {
        getqrcode().then((res) => {
          if (res.code == 200) {
            this.ticket = res.data.ticket;
            if (!res.data.ticket) {
              return this.$message.error("服务器ticket获取失败，请联系管理员");
            }
            this.timeOut = setInterval(() => {
              this.$store
                .dispatch("user/scanresultservice", { ticket: res.data.ticket })
                .then((resA) => {
                  if (resA.msg == "未扫码") {
                  } else if (resA.msg == "请先绑定账号") {
                    clearTimeout(this.timeOutQ);
                    clearInterval(this.timeOut);
                    this.$message.error(resA.msg);
                    this.$router.push("/wxbind?openid=" + resA.data.openid);
                  } else {
                    clearTimeout(this.timeOutQ);
                    clearInterval(this.timeOut);
                    this.$router.push("/");
                  }
                });
            }, 2000);
            this.timeOutQ = setTimeout(() => {
              clearInterval(this.timeOut);
            }, 600000);
          }
        });
      }
    },
  },
  mounted() {
    // if(this.ishasserve){
    //   this.wexinpage()
    // }
  },
  beforeDestroy() {
    document.removeEventListener('keydown',this.watchEnter)
  },
  methods: {
    baomingHref(){
      location.href=this.href
    },
    Adminhref(){
      location.href=this.hrefAdmin
    },
    //键盘事件
    watchEnter(e) {
      let key = window.event ? e.keyCode : e.which;
      if (key == 13 && !this.loading) {
        this.handleLogin();
      }
    },
    // wexinpage(){
    //   if(!this.isLogin&&this.ishasserve){
    //   this.obj = new WxLogin({
    //     self_redirect:false,
    //     id:"WeChatLogin",
    //     appid: "wx276f3497b805122e",
    //     scope: "snsapi_login",
    //     redirect_uri: encodeURI("http://xuexi.shejiyuan.com/index/index/tjyUnionid.html"),
    //     state: this.startWx,
    //     style: "",
    //     href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4OyBkaXNwbGF5OiBub25lO30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9IA0KLm9sZC10ZW1wbGF0ZXtoZWlnaHQ6IDEwMCU7fQ0KLmltcG93ZXJCb3h7aGVpZ2h0OiAxMDAlO2Rpc3BsYXk6IGZsZXg7YWxpZ24taXRlbXM6IGNlbnRlcjtmbGV4LWRpcmVjdGlvbjogY29sdW1uO2p1c3RpZnktY29udGVudDogY2VudGVyO30="
    //   });
    //   }
    // },
    // 验证码配置
    // getVerify() {
    //   verify().then(res => {
    //     this.verifyShow = res.data.verify_switch
    //     if (res.data.verify_switch) {
    //       this.verifySrc = res.data.verify_src
    //       this.loginModel.verify_id = res.data.verify_id
    //     }
    //   })
    // },
    // 验证码刷新
    verifyRefresh() {
      this.loginModel.verify_id = "";
      this.loginModel.verify_code = "";
      // this.$refs.verify_code_ipt.focus()
    },
    // 登录
    handleLogin() {
      this.loading = true;
      this.$store
        .dispatch("user/login", this.loginModel)
        .then((res) => {
          this.$router
            .push({
              path: "/",
            })
            .then(() => {
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
    changeCheckBox(data) {
      this.loginModel.rememberMe = data;
    },
  },
  beforeDestroy() {
    clearInterval(this.timeOut);
    clearTimeout(this.timeOutQ);
  },
};
</script>

<style lang="scss">
@import "~@/styles/calculation.scss";
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: #000;
  }
}

/* reset element-ui css */
.login-container {
  box-shadow: none;
  .el-input {
    display: inline-block;
    box-shadow: none;
    width: 100% !important;
    background: transparent;
    input {
      // margin-left: 5px;
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      color: #000;
      caret-color: #000;
      box-shadow: none;
      width: 100% !important;
      height: 50px !important;
    //   border-radius: 30px;
      &:-webkit-autofill {
        box-shadow: none;
        // box-shadow: 0 0 0px 1000px $light_gray inset !important;
        // -webkit-text-fill-color: $cursor !important;
      }
    }
    .el-input__inner {
    //   padding-left: 40px !important;
    }
    .el-input__prefix {
      font-size: px2rem(18) !important;
      margin-left: 10px;
    }
  }

  .el-form-item {
    border: 1px solid #2B4FEE;
    border-radius:  6px;
    overflow: hidden;
    // background: #fff;
    // border-radius: 30px;
    color: #454545;
  }
  .style_change_item {
    border: none;
    width: auto !important;
    margin: 0;
    margin-top: -10px;
    
  }
}
</style>

<style lang="scss" scoped>
@import "~@/styles/calculation.scss";
$bg: url(~@/assets/logo/bg.jpg);
$dark_gray: #889aa4;
$light_gray: #eee;
.el-form-item__error {
  left: 10% !important;
}
.login-container {
  // margin-top:vmh(-50);
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, rgba(12, 122, 237, 0.9000), rgba(15, 94, 215, 0.8000),rgba(10, 90, 210, 0.9000),rgba(12, 89, 206, 0.9000));
  background-size: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-container-middle {
    margin-top: -2vh;
    // width: 55vw !important;
    // height: 40vh;
    // min-width:;
    // background: chartreuse;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .login-container-text {
      // padding: vmh(36) 0;
      display: flex;
      span {
        padding: 0 vmw(12) 0 0;
        display: inline-block;
        height: vmh(58);
        // background: firebrick;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      p {
        font-size: px2rem(40);
        font-weight: 600;
        font-family: "微软雅黑";
        // background: firebrick;
        display: inline-block;
        color: #fff;
      }
      img{
        height: 65px;
        margin-right: 16px;
      }
    }
    .login-container-form {
      // margin-top:vmh(36);
      height: 562px;
      // background: url(~@/assets/logo/form-bg.png) no-repeat;
      // background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .login-container-form-left {
        width: 509.92px;
        height: 530px;
        // background: chartreuse;
        padding-top: 66px;
        padding-left: 35px;
        background: url(~@/assets/logo/form-bg-left.png) no-repeat;
        background-size: 100% 100%;
        div {
          margin-bottom: 16px;
          width: 34px;
          height: 4px;
          background: #fff;
        }
        p {
          margin: 0;
          color: #fff;
          font-size: 24px;
          font-weight: 400;
          font-family: "Microsoft YaHei";
        }
      }
      
      .weixin {
        height: 40px;
        width: 100%;
        span {
          padding-left: 20px;
          padding-right: 12px;
          color: #666;
          font-weight: 600;
        }
        // display: flex;
        // justify-content: center;
        img {
          height: 100%;
          cursor: pointer;
        }
      }
      .login-container-form-right {
        width: 562px;
        height: 100%;
        // background: orange;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: url(~@/assets/logo/form-bg-right.png) no-repeat;
        background-size: 100% 100%;

        form {
           width: 418px;
          height: 100% !important;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          button {
            margin-top: 10px !important;
            height: 54px !important;
          }
          p {
            margin-left: 20px;
            font-size: 14px;
            color: #999999;
            .baomingA {
              color: #0000ee;
              margin-left: 10px;
            }
            .baomingA:hover {
              text-decoration: underline;
            }
          }
          .chukebox{
            display: flex;
            align-items: center;
            p{
              margin: 0;
              color: #000;
              cursor: pointer;
              &:hover{
                color: rgb(22, 119, 255);
              }
            }
          }
        }
      }
    }
  }
  // .login-form {
  //   position: relative;
  //   width: 520px;
  //   max-width: 100%;
  //   padding: 160px 35px 0;
  //   margin: 0 auto;
  //   overflow: hidden;
  // }

  .title-container {
    position: relative;
    height: 110px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    margin-bottom:32px;
    .title {
      font-size: px2rem(22);
      font-weight: bold;
      margin: 0;
    }
  }
}
::v-deep {
  .iframe {
    height: 100% !important;
    width: 418px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    #WeChatLogin {
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      height: 184px;
      width: 184px;
    }
    // iframe{
    //   width:auto !important;
    //   height: auto !important;
    // }
     p {
            margin-left: 20px;
            font-size: 14px;
            color: #999999;
            .baomingA {
              color: #0000ee;
              margin-left: 10px;
            }
            .baomingA:hover {
              text-decoration: underline;
            }
          }

          .chukebox{
            display: flex;
            align-items: center;
            p{
              margin: 0;
              color: #000;
              cursor: pointer;
              &:hover{
                color: rgb(22, 119, 255);
              }
            }
          }
  }
}
// @media screen  and (max-width: 1360px){
//   .title-container{
//     .title{
//       font-size:18px !important;
//     }
//   }
//   .el-input{
//     input{
//       width:340px !important;
//       height:52.5px !important;
//     }
//   }
// }
// @media screen  and (max-height: 768px){
//   .title-container{
//     .title{
//       font-size:18px !important;
//     }
//   }
//   .el-input{
//     input{
//       width:340px !important;
//       height:52.5px !important;
//     }
//   }
// }
// @media screen  and (max-width: 1080px) {
//   .login-container{
//     width: 1080px !important;
//     .login-container-form-left{
//       width: 270px !important;
//       height:306.8px !important;
//       p{
//         font-size: 14px !important;
//       }
//     }
//     .login-container-form-right{
//       width:324px !important;
//       height:306.8px !important;
//       form{
//         button{
//           margin-bottom: 10px !important;
//           height:50px !important;
//         }
//       }
//     }
//     .login-container-form-left div{
//       margin-bottom: 16px;
//       width: 34px !important;
//       height:4px !important;
//     }
//     .login-container-text{
//       padding:36px 0 !important;
//       p{
//         font-size: 30px !important;
//       }
//     }
//   }
//   ::v-deep{
//     .iframe {
//       iframe{
//         width: 270px !important;
//         height:306.8px !important;
//         .qrcode{
//           width:150px !important;
//         }
//       }
//     }
//   }

// }

// @media screen  and (max-height: 680px){
//  .login-container .login-container-middle .login-container-form .login-container-form-right{
//       form{
//         button{
//           margin-bottom: 10px !important;
//           height:50px !important;
//         }
//         p{
//           margin-bottom: 10px !important;
//         }
//       }
//     }
// }
// @media screen  and (max-height: 590px) {
//   .login-container{
//     height: 590px !important;
//     .login-container-form-right{
//       height:306.8px !important;
//       width:324px !important;
//     }
//     .login-container-form-left{
//       width: 270px !important;
//       height:306.8px !important;
//       p{
//         font-size: 14px !important;
//       }
//     }
//     .login-container-form-left div{
//       margin-bottom: 16px;
//       width: 34px !important;
//       height:4px !important;
//     }
//     .login-container-text{
//       padding:36px 0 !important;
//       p{
//         font-size: 30px !important;
//       }
//     }
//   }
// }
.cope {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #eee;
  position: relative;
  margin-top: 3rem;
  .lefos {
    color: #fff;
    font-weight: 600;
    padding:0 6px;
  }
}
</style>
